<template>
  <el-dialog
    class="common-dialog"
    title="订单打印预览"
    :visible="showDialog"
    width="380px"
    @close="cancel"
    append-to-body
    destroy-on-close
  >
    <div v-if="orderInfo.id" class="print-area" id="printArea">
      <div class="base-info">
        <div class="store" v-if="storeName">{{ storeName }}</div>
        <div class="no">流水号：{{ orderInfo.orderSn }}</div>
      </div>
      <div>*****************************************************</div>
      <div class="goods-list" v-if="orderGoods.length > 0">
        <div class="goods-item">
          <span class="item-name">名称</span>
          <span class="item-number">数量</span>
          <span class="item">价格</span>
        </div>
        <div
          class="goods-item"
          v-for="(goodsInfo, index) in orderGoods"
          :key="goodsInfo.goodsName"
        >
          <span class="item-name">
            {{ index + 1 }}.{{ goodsInfo.goodsName }}
          </span>
          <span class="item-number">x {{ goodsInfo.number }}</span>
          <span class="item">￥{{ goodsInfo.price }}</span>
        </div>
      </div>
      <!--      <div v-if="orderInfo.goods.length > 0">-->
      <!--        ****************************************-->
      <!--      </div>-->
      <!--      <div class="member-info">-->
      <!--        <div class="item" v-if="orderInfo.isVisitor == 'N'">-->
      <!--          <span class="t">会员名称：</span>{{ orderInfo.userInfo.name }}-->
      <!--        </div>-->
      <!--        <div class="item" v-if="orderInfo.isVisitor == 'N'">-->
      <!--          <span class="t">会员号码：</span>-->
      <!--          {{ orderInfo.userInfo.userNo ? orderInfo.userInfo.userNo : "-" }}-->
      <!--        </div>-->
      <!--        <div class="item" v-if="orderInfo.isVisitor == 'Y'">-->
      <!--          <span class="t">会员信息：</span>无-->
      <!--        </div>-->
      <!--      </div>-->
      <!--      <div v-if="orderInfo.orderMode == 'express' && orderInfo.address">-->
      <!--        ****************************************-->
      <!--      </div>-->
      <!--      <div-->
      <!--        class="address-info"-->
      <!--        v-if="orderInfo.orderMode == 'express' && orderInfo.address"-->
      <!--      >-->
      <!--        <div class="item">-->
      <!--          收货人名：{{ orderInfo.address.name ? orderInfo.address.name : "-" }}-->
      <!--        </div>-->
      <!--        <div class="item">-->
      <!--          联系电话：{{-->
      <!--            orderInfo.address.mobile ? orderInfo.address.mobile : "无"-->
      <!--          }}-->
      <!--        </div>-->
      <!--        <div class="item">-->
      <!--          详细地址：{{ orderInfo.address.provinceName-->
      <!--          }}{{ orderInfo.address.cityName }}{{ orderInfo.address.regionName-->
      <!--          }}{{ orderInfo.address.detail }}-->
      <!--        </div>-->
      <!--      </div>-->
      <div>*****************************************************</div>
      <div class="total-info">
        <!--        <div class="item">订单类型：{{ orderInfo.typeName }}</div>-->
        <div class="item">订单时间：{{ orderInfo.addTime }}</div>
        <div class="item">
          订单金额：
          <span class="discount">￥{{ orderInfo.goodsPrice.toFixed(2) }}</span>
        </div>
        <div class="item">
          优惠金额：
          <span class="discount">
            ￥{{ (orderInfo.goodsPrice - orderInfo.actualPrice).toFixed(2) }}
          </span>
        </div>
        <div class="item">
          支持金额：
          <span class="amount">￥{{ orderInfo.actualPrice.toFixed(2) }}</span>
        </div>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button
        type="primary"
        class="main-button"
        @click="handlePrint(printObj)"
        v-print="printObj"
      >
        打印
      </el-button>
      <el-button @click="cancel()">取消</el-button>
    </div>
  </el-dialog>
</template>
<script>
export default {
  props: {
    showDialog: {
      type: [Boolean],
      default: () => false,
    },
    orderInfo: {
      type: [Object],
      default: () => {},
    },
    orderGoods: {
      type: [Array],
      default: () => [],
    },
  },
  data() {
    return {
      printObj: {
        id: "printArea",
        popTitle: "小票打印",
        extraCss: "",
        preview: false,
        previewTitle: "预览的标题",
        previewPrintBtnLabel: "预览结束，开始打印",
        extraHead: "",
        standard: "loose",
      },
      storeName: this.$store.getters.storeName,
    };
  },
  methods: {
    handlePrint() {
      this.$emit("closeDialog", "printOrder");
    },
    cancel() {
      this.$emit("closeDialog", "printOrder");
    },
  },
};
</script>
<style scoped lang="scss">
/* 隐藏不需要打印的元素 */
@media print {
  button {
    display: none;
  }
  .no-print {
    display: none;
  }
}
.print-area {
  width: 57mm; /* 宽度设为 57mm */
  font-size: 10px; /* 字体大小调整 */
  line-height: 1.2; /* 行高调整 */
  margin: 0 auto; /* 居中 */
  padding: 1mm; /* 内边距 */
  box-sizing: border-box; /* 确保 padding 不影响宽度 */

  //font-size: 14px;
  //border: solid 1px #ccc;
  //padding: 30px 10px 30px 10px;
  //overflow: hidden;
  //width: 100%;

  .base-info {
    margin-bottom: 1mm;
    .store {
      font-size: 24px;
      margin-bottom: 1mm;
    }
    .name {
      font-weight: bold;
      margin-bottom: 1mm;
    }
  }

  .goods-list {
    margin-top: 1mm;
    margin-bottom: 1mm;
    width: 57mm;

    .goods-item {
      display: flex;
      justify-content: space-around;
      margin-bottom: 10px;
      .item-name {
        width: 30mm; /* 固定宽度 */
        white-space: nowrap; /* 禁止换行 */
        overflow: hidden; /* 隐藏超出部分 */
        text-overflow: ellipsis; /* 默认显示 ... */
      }
      .item {
        width: 10mm; /* 固定宽度 */
      }
      .item-number{
        width: 6mm;
      }
    }
  }

  .member-info {
    margin-top: 10mm;
    margin-bottom: 20mm;

    .item {
      clear: both;
    }
  }

  .address-info {
    margin-top: 1mm;
    margin-bottom: 2mm;
  }

  .total-info {
    .item {
      margin-bottom: 1mm;

      .amount {
        //font-weight: bold;
        //font-size: 28px;
      }
    }
  }
}
</style>
<style media="print" lang="scss">
@page {
  size: auto;
  margin: 0mm;
}

@media print {
  html {
    height: auto;
    width: auto;
    margin: 0px;
  }

  body {
    border: solid 1px #ffffff;
  }

}
</style>
